<script lang="ts" name="OdSelfcareAssess" setup>
import dDialog from '@/components/dDialog/dDialog.vue'
import {HeaderData} from '@/components/dTable/dTable'
import dTable from '@/components/dTable/dTable.vue'
import {onBeforeMount, ref, watch} from 'vue'
import {useRoute} from 'vue-router'
const route = useRoute()
// 禁止编辑
const disEdit = ref<boolean>(Boolean(route.query.disEdit))

const props = defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  // 自理能力得分详情
  odSelfcareScore: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['close', 'confirm'])

// 题目单选
interface Radios {
  lable: string // 文案
  value: string // 值
  score: number // 分数
}

// 题目列表
interface OdSelfcareAssessTable {
  scoringItem: string //项目标题
  scoringItemText: string // 项目文案
  degreeGradeRadios: Array<Radios> // 题目单选框组
  score: number // 评分
  degreeGrade: string // 题目选中值
}

// 总分
const totalScore = ref<number>(0)

const radios1: Array<Radios> = [
  {lable: '可自理（独立完成）', value: '1', score: 0},
  {lable: '轻度依赖', value: '2', score: 0},
  {lable: '中度依赖（需要协助，切碎搅拌食物）', value: '3', score: 3},
  {lable: '不能自理（完全需要帮助）', value: '4', score: 5}
]

const radios2: Array<Radios> = [
  {lable: '可自理（独立完成）', value: '1', score: 0},
  {lable: '轻度依赖（能独立地洗头、梳头、洗脸、刷牙、剃须等；洗澡需要协助）', value: '2', score: 1},
  {lable: '中度依赖（在协助下和适当的时间内，能完成部分梳洗活动）', value: '3', score: 3},
  {lable: '不能自理（完全需要帮助）', value: '4', score: 7}
]

const radios3: Array<Radios> = [
  {lable: '可自理（独立完成）', value: '1', score: 0},
  {lable: '轻度依赖', value: '2', score: 0},
  {lable: '中度依赖（需要协助，在适当的时间内完成部分穿衣）', value: '3', score: 3},
  {lable: '不能自理（完全需要帮助）', value: '4', score: 5}
]

const radios4: Array<Radios> = [
  {lable: '可自理（不需协助，可自控）', value: '1', score: 0},
  {lable: '轻度依赖（偶尔失禁，但基本上能如厕或使用便具）', value: '2', score: 1},
  {lable: '中度依赖（经常失禁，在很多提示和协助下尚能如厕或使用便具）', value: '3', score: 5},
  {lable: '不能自理（完全失禁，完全需要帮助）', value: '4', score: 10}
]

const radios5: Array<Radios> = [
  {lable: '可自理（独立完成所有活动）', value: '1', score: 0},
  {lable: '轻度依赖（借助较小的外力或辅助装置能完成站立、行走、上下楼梯等）', value: '2', score: 1},
  {lable: '中度依赖（借助较大的外力才能完成站立、行走，不能上下楼梯）', value: '3', score: 5},
  {lable: '不能自理（卧床不起，活动完全需要帮助）', value: '4', score: 10}
]

// 评估表头
const odSelfcareAssessHeader = ref<Array<HeaderData>>([
  {prop: 'scoringItem', label: '评分事项，内容评分', columnType: 'slot', align: 'center', width: '246'},
  {prop: 'degreeGrade', label: '程度等级', columnType: 'slot', align: 'center', 'min-width': '200'},
  {prop: 'score', label: '评分', columnType: 'slot', align: 'center', width: '91'}
])

// 评估列表
const odSelfcareAssessTable = ref<Array<OdSelfcareAssessTable>>([
  {scoringItem: '进餐：', scoringItemText: '使用餐具将饭菜送入口，咀嚼，吞咽等活动', degreeGradeRadios: radios1, score: 0, degreeGrade: '1'},
  {scoringItem: '梳洗：', scoringItemText: '梳头、洗脸、刷牙、剃须洗澡等活动', degreeGradeRadios: radios2, score: 0, degreeGrade: '1'},
  {scoringItem: '穿衣：', scoringItemText: '穿衣裤、袜子、鞋子等活动', degreeGradeRadios: radios3, score: 0, degreeGrade: '1'},
  {scoringItem: '如厕：', scoringItemText: '小便、大便等活动及自控', degreeGradeRadios: radios4, score: 0, degreeGrade: '1'},
  {scoringItem: '活动：', scoringItemText: '站立、室内行走、上下楼梯、户外活动', degreeGradeRadios: radios5, score: 0, degreeGrade: '1'}
])

/**
 * @description: 设置回显得分项
 * @return {*}
 */
const setOdSelfcareScore = () => {
  if (props.odSelfcareScore) {
    const arr = props.odSelfcareScore?.split('|') || []
    arr.forEach((item, index) => {
      odSelfcareAssessTable.value[index].degreeGrade = item
    })
  }
}

/**
 * @description: 关闭弹窗
 * @return {*}
 */
const onCancel = () => {
  emits('close')
}
/**
 * @description: 关闭弹窗
 * @return {*}
 */
const onClose = () => {
  emits('close')
}

/**
 * @description: 保存
 * @return {*}
 */
const onConfirm = () => {
  // 得分明细
  const scoreInfor = odSelfcareAssessTable.value
    .map((item) => {
      return item.degreeGrade // 评分
    })
    .join('|')
  emits('confirm', {scoreInfor, totalScore: totalScore.value})
  emits('close')
}

watch(
  () => odSelfcareAssessTable.value,
  () => {
    totalScore.value = 0
    // 计算总分
    odSelfcareAssessTable.value.forEach((item) => {
      // 获取单选框在数组中的下标
      const scoreIndex = item.degreeGradeRadios.findIndex((radio) => {
        return radio.value === item.degreeGrade
      })
      // 获取对应下标单选框的分数
      const {score} = item.degreeGradeRadios[scoreIndex] || 0
      totalScore.value += score // 总分,先计算总分，不然评分更新还会触发一次
      item.score = score // 评分
    })
  },
  {deep: true}
)
onBeforeMount(() => {
  setOdSelfcareScore()
})
</script>
<template>
  <d-dialog
    title="老年人生活自理能力评估"
    :show-dialog="showDialog"
    :width="971"
    :hide-save-btn="disEdit"
    @cancel="onCancel"
    @close="onClose"
    @confirm="onConfirm"
  >
    <div class="title">
      根据五个方面进行评估，各方面评分汇总后，0-3分为可自理；4-8分为轻度依赖；9-18分为中度依赖；19分为不能自理
    </div>
    <d-table :table-data="odSelfcareAssessTable" :table-header-data="odSelfcareAssessHeader" :highlight-current-row="false" class="od-selfcare-assess-table">
      <template #scoringItem="{row}">
        <div class="d-common-text-align-left">
          <b>{{ row.scoringItem }}</b>{{ row.scoringItemText }}
        </div>
      </template>
      <template #degreeGrade="{row}">
        <el-radio-group v-model="row.degreeGrade" :disabled="disEdit">
          <el-radio v-for="item in row.degreeGradeRadios" :key="item.value" :label="item.value">
            <div class="degree-grade-radios-lable">
              <span>
                {{ item.lable }}
              </span>
              <span> {{ item.score }}分 </span>
            </div>
          </el-radio>
        </el-radio-group>
      </template>
      <template #score="{row}">
        {{ row.score }}分
      </template>
    </d-table>
    <div class="total-score">
      总分：{{ totalScore }}
    </div>
  </d-dialog>
</template>
<style scoped lang="less">
.title {
  margin-bottom: 19px;
}
.od-selfcare-assess-table {
  height: 705px;
}
.total-score {
  margin-top: 11px;
  text-align: right;
  font-weight: bold;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  .el-radio {
    margin: 0;
  }
  .degree-grade-radios-lable {
    width: 540px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
